<template>
  <div class="app-container">
    <div>
      刷新：
      <el-switch
        v-model="reflesh"
        active-text="开"
        inactive-text="关"
        @change="switchReflesh">
      </el-switch>
      <div v-if="roles[0]==='admin'" style="float:right">
        提问开关：
        <el-switch
          v-model="questionOnOff"
          active-text="开"
          inactive-text="关"
          @change="switchQuestion">
        </el-switch>
      </div>
    </div>
    <br>
    <br>
    <div>
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row>
        <el-table-column label="名称" width="110" align="center">
          <template slot-scope="scope">
            {{scope.row.name}}
          </template>
        </el-table-column>
        <el-table-column label="手机" width="130" align="center">
          <template slot-scope="scope">
            {{scope.row.mobile}}
          </template>
        </el-table-column>
        <el-table-column label="类别" width="130" align="center">
          <template slot-scope="scope">
            {{scope.row.category | wrapCategory}}
          </template>
        </el-table-column>
        <el-table-column label="问题" header-align="center">
          <template slot-scope="scope">
            {{scope.row.question}}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="created_at" label="时间" width="200">
          <template slot-scope="scope">
            <span>{{ scope.row.insertTime }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div id="message"></div>
  </div>
</template>

<script>
  import { switchQuestionOnOff, getQuestionz } from '@/api/common'
  import { convertImageUrl, _hostUrl, _websocketUrl } from '@/utils/aws1903'
  import { mapGetters } from 'vuex'

  export default {
    filters: {
      wrapCategory(c) {
        return c === 0 ? '技术类' : '非技术类'
      }
    },
    computed: {
      ...mapGetters([
        'name',
        'roles'
      ])
    },
    data() {
      return {
        questionOnOff: false,
        list: [],
        category: null,
        getUploadParam: {
          category: 1
        },
        imageUrl: '',
        currentCategory: 1,
        listLoading: true,
        reflesh: false,
        websocket: null,
        count: 0
      }
    },
    created() {
      this.init()
    },
    beforeDestroy() {
      if (this.websocket != null) {
        this.websocket.closeWebSocket()
        this.websocket = null
      }
    },
    methods: {
      init() {
        this.listLoading = true
        getQuestionz(1, 20).then(response => {
          this.list = response.data.list
          this.questionOnOff = response.data.question
          this.listLoading = false
        })
      },
      switchQuestion() {
        this.listLoading = true
        switchQuestionOnOff().then(response => {
          this.questionOnOff = response.data.question
          this.listLoading = false
        })
      },
      createWebsocket() {
        if ('WebSocket' in window) {
          this.websocket = new WebSocket(_websocketUrl)
          this.websocket.vm = this
        } else {
          this.$message.error('当前浏览器不支持 websocket')
          return
        }
        //连接发生错误的回调方法
        this.websocket.onerror = function(e) {
          this.vm.$message.error('WebSocket 错误')
          console.error(e)
        }
        //连接成功建立的回调方法
        this.websocket.onopen = function() {
          this.vm.$message('WebSocket 连接成功')
        }
        //接收到消息的回调方法
        this.websocket.onmessage = function(event) {
          //连接关闭的回调方法
          this.vm.list.unshift(JSON.parse(event.data))
          this.vm.$message({
            message: '收到新的问题',
            type: 'success'
          })
        }
        this.websocket.onclose = function() {
          this.vm.$message('WebSocket 关闭')
          if(this.vm.reflesh) {
            this.vm.websocket = new WebSocket(_websocketUrl)
          }
        }
        //关闭WebSocket连接
        this.websocket.closeWebSocket = function() {
          this.close()
        }
        //发送消息
        this.websocket.send = function() {
          var message = document.getElementById('text').value
          this.send(message)
        }
        this.listLoading = true
        getQuestionz(1, 20).then(response => {
          this.list = response.data.list
          this.listLoading = false
        })
      },
      switchReflesh() {
        this.listLoading = true
        if (this.reflesh) {
          this.createWebsocket()
        } else {
          this.websocket.closeWebSocket()
        }
        this.listLoading = false
      }
    }
  }
</script>
